<template>
    <div class="home">
        <h2>{{ nickname }}</h2>
        <button @click="setnickname('abc')">修改</button>
        <ul>
          <li v-for="(item, index) in female" :key="index">
            {{item.name}}
          </li>
        </ul>
    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState , mapGetters , mapMutations, mapActions } from 'vuex'
import Swiper from "@/components/Swiper";

// mapState 原理
// function mapState(arr) { 
//   let obj = {};
//   arr.forEach(key => {
//     obj[key] = function() {
//       return this.$store.state[key]
//     }
//   })
//   return obj
// }

export default {
    name: "Home",
    components:{
      Swiper
    },
    computed: {
      // 如果使用了module 使用辅助函数时，应加上第一个参数,参数为模块名
      // 如果不想这样子做 还可以通过引入 createNamespacedHelpers 见官网
       ...mapState("moduleA",["nickname","userList"]),
       ...mapGetters("moduleA",["male","female"])
    },
    data() {
        return {
          count:1
        };
    },
    methods: {
      ...mapMutations("moduleA",['setnickname']),
      ...mapActions("moduleA",['getUserAge']),
    },
    created() {
      // 兄弟组件传参
      this.$bus.$on('change', () => { 
        console.log(this.count);
       })
    },
    async mounted() {
      let res =  await this.getUserAge()
      console.log(res)
    },
    
};
</script>

<style scoped>
.home{
  border: 1px solid green;
  margin: 10px 0;
}
</style>
